<template>
  <div class="goldcoin">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        聚合金币明细
      </div>
      <div class="righ">
        <a href="javascript:;" class="back" @click="goBack">返回</a>
        <div class="rig" @click="refbtn">
          <div class="img">
            <img src="../../../../icons/icon/刷新.png" />
          </div>刷新
        </div>
      </div>
    </div>
    <div class="usercount">
      <div class="userlist">
        <el-table
          :data="userData"
          style="width: 100%"
          :header-cell-style="{
            'color':'#333',
            'height':'50px',
            'font-size':'14px',
            'background': 'rgba(242, 242, 242, 1)'
          }"
        >
          <el-table-column prop="userCount" label="用户账号" width="180"></el-table-column>
          <el-table-column prop="userName" label="用户昵称" width="180"></el-table-column>
          <el-table-column prop="levName" label="用户等级"></el-table-column>
          <el-table-column prop="goldCoin" label="可用金币"></el-table-column>
          <el-table-column prop="historyGoldCoin" label="历史金币"></el-table-column>
          <el-table-column prop="polymerizationCoin" label="聚合金币值"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="select-con">
      <div class="scon">
        <div class="dhead clearfix">筛选查询</div>
        <div class="dbd">
          <div class="dbd-lef">
            <!-- <p>
              <label>成长值来源：</label>
              <el-select v-model="sourceval" placeholder="全部">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </p>-->
            <p style="margin-right:-5px" class="p2">
              <label for>操作时间：</label>
              <el-date-picker
                v-model="timeval"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择时间"
              ></el-date-picker>
            </p>
          </div>
          <div class="dbd-rig">
            <!-- <a href="javascript:;" @click="search">筛选</a> -->
            <el-button type="primary" @click="search">筛选</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="data-list clearfix">
      <div class="dhead clearfix">
        <p>数据列表</p>
      </div>
      <div class="data-bd">
        <el-table
          ref="multipleTable"
          :data="coinData"
          align="center"
          style="width: 100%;margin-left:-1px"
          class="table-class"
          :header-cell-style="{
            'background-color': '#fafafa',
            'color':'#333',
            'height':'56px',
            'line-height':'56px',
            'font-size':'14px',
            'background': 'rgba(242, 242, 242, 1)'
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" align="center" />
          <el-table-column prop="coinSource" label="金币来源" width="300" align="center" />
          <el-table-column prop="coinCount" label="金币变化" align="center" >
             <template slot-scope="scope">
               {{scope.row.operationType==0?'-':'+'}} {{scope.row.coinCount}}
            </template>
          </el-table-column>
          <el-table-column prop="ceateTime" label="时间" show-overflow-tooltip align="center" />
          <el-table-column label="备注" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <!-- slot-scope="scope" -->
              <div class="action" style="text-align:center">
                <p>操作备注:{{scope.row.remarks? scope.row.remarks:'无'}}</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination-block">
        <!-- <el-button type="primary" @click="delAll(multipleSelection)">批量删除</el-button> -->
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next,total,slot, jumper"
          :total="this.dataTotal?this.dataTotal:0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <div class="page-number" layout="slot">
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
      <div class="clear" />
    </div>
  </div>
</template>
<script>
import { getCoinDetail, getCoin } from "@/api/usermanage.js";
export default {
  inject: ["reload"],
  data() {
    return {
      currentPage: 1,
      pageNum: 1,
      pageSize: 4,
      dataTotal: "",
      checked: true,
      userData: [
        {
          date: 18000,
          name: "张明",
          level: 1,
          coin: 1000
        }
      ],
      coinData: [
        {
          uid: "购买金币",
          coinchange: "+100",
          time: "2019-05-14 18:00:49"
        },
        {
          uid: "购买金币",
          coinchange: "+100",
          time: "2019-05-14 18:00:49"
        },
        {
          uid: "购买金币",
          coinchange: "+100",
          time: "2019-05-14 18:00:49"
        },
        {
          uid: "购买金币",
          coinchange: "+100",
          time: "2019-05-14 18:00:49"
        }
      ],
      sourceval: "",
      timeval: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      coinType: "j",
      showVal: "",
      multipleSelection: [] // 多选数组
    };
  },
  created() {
    this.getlist();
    this.getmergeDetail();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleClick(row) {
      console.log(row);
      this.addlevelDialog = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.getmergeDetail();
      console.log(`当前页: ${val}`);
    },
    getlist() {
      getCoin({
        userCode: this.$route.query.userCode
      }).then(res => {
        // console.log(res);
        this.userData = res.data.list;
        this.dataTotal = res.data.total;
      });
    },
    //聚合详情
    getmergeDetail() {
      getCoinDetail({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userCode: this.$route.query.userCode,
        coinType: this.coinType,
        dateTime: this.timeval
      }).then(res => {
        console.log(res.data.list);
        this.coinData = res.data.list;
      });
    },
    search() {
      if (this.timeval) {
        this.getmergeDetail();
      }else{
        alert("请选择时间")
      }
      // alert(this.timeval);
    },
    goBack() {
      this.$router.go(-1);
    },
    refbtn() {
      this.reload();
    },
    // 批量删除
    delAll(val) {
      const delAllList = [];
      for (let i = 0; i < val.length; i++) {
        delAllList.push(val[i].uid);
      }
      // console.log(delAllList);
      // deleteTable(delAllList).then(res => {
      //   this.getUser();
      // });
    }
  }
};
</script>
<style lang="scss" scoped>
.goldcoin {
  width: 100%;
  padding: 0 110px 0 26px;
  margin: 16px 0;
  .dashboard-text {
    margin-top: 17px;
    // width: 1517px;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .righ {
      // width:130px;
      display: flex;
      .back {
        display: inline-block;
        width: 76px;
        height: 37px;
        box-shadow: 0px 3px 8px 0px rgba(86, 86, 86, 0.5);
        border-radius: 4px;
        color: #fff;
        margin-right: 20px;
        text-align: center;
        line-height: 38px;
        background: url(../../../../icons/icon/back.png) no-repeat 7px center
          rgba(204, 204, 204, 1);
      }
      .rig {
        font-size: 14px;
        width: 76px;
        height: 37px;
        text-align: center;
        line-height: 37px;
        background: #488dff;
        border-radius: 4px;
        line-height: 37px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .usercount {
    width: 100%;
    // height: 192px;
    height: auto;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 40px;
    padding: 24px 23px 24px 30px;
  }
  .select-con {
    // width: 1517px;
    // height: 150px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 30px;
    .scon {
      padding: 25px 0 0 29px;
      .dhead {
        // width: 1463px;
        height: 60px;
        font-size: 16px;
        padding-right: 24px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }
      .dbd {
        width: 100%;
        display: flex;
        padding: 24px 23px 24px 29px;
        .dbd-lef {
          float: left;
          p {
            float: left;
            label {
              color: rgba(51, 51, 51, 1);
            }
          }
          .p2 {
            margin-right: -5px;
            margin-left: 60px;
            .el-input {
              .el-input__prefix {
                right: 5px;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
              }
            }
          }
          input[type="text"] {
            width: 240px;
            height: 40px;
            border: 1px solid rgba(204, 204, 204, 1);
            border-radius: 2px;
            color: #999;
            padding-left: 11px;
          }
        }
        .dbd-rig {
          float: right;
          margin-left:80px;
          .searchbtn {
            display: block;
            width: 100px;
            height: 40px;
            background: rgba(72, 141, 255, 1);
            border-radius: 2px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            margin-left: 80px;
          }
        }
      }
    }
  }
  //data-list
  .data-list {
    // width: 1517px;
    height: auto;
    min-height: 1200px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 24px 30px 30px;
    .dhead {
      // width: 1463px;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      padding-right: 24px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      overflow: hidden;
      margin-bottom: 24px;
      p {
        float: left;
      }
      .dh-rig {
        float: right;
        // overflow: hidden;
        li {
          float: left;
          list-style: none;
          width: 100px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          margin-left: 40px;
          background: rgba(72, 141, 255, 1);
          border-radius: 1px;
          text-align: center;
        }
        .abg {
          width: 124px;
          height: 40px;
          // border: 1px solid rgba(204, 204, 204, 1);
          // border-radius: 1px;
          color: #999;
          background: #fff;
          position: relative;
          // &:after {
          //   content: "";
          //   display: inline-block;
          //   width: 0px;
          //   height: 0px;
          //   border-top: 8px solid #cccccc;
          //   border-left: 8px solid transparent;
          //   border-right: 8px solid transparent;
          //   position: absolute;
          //   top: 16px;
          //   left: 98px;
          // }
        }
      }
    }
    .data-bd {
      height: auto;
      margin-bottom: 40px;
      padding-bottom: 20px;
      .el-checkbox__inner {
        width: 24px !important;
        height: 24px !important;
      }
    }
    .clear {
      clear: both;
      height: 200px;
    }
  }
}
</style>
